<!DOCTYPE html>
<html ng-app="myApp" style="height: 100%">
<head lang="en">
    <meta charset="UTF-8">
    <title>datagrid综合示例</title>
    <link rel="stylesheet" href="../../themes/default/wi-all.css"/>
    <!--<script src="../../lib/resize-listener.js"></script>-->
    <script src="../../lib/angular-1.3.6/angular.min.js"></script>

    <!--<script src="../../build/WebUI4Angular-tpls-all-mini.js"></script>-->


    <script src="../resizelistener/resizelistener.js"></script>
    <script src="../position/position.js"></script>
    <script src="../bindHtml/bindHtml.js"></script>
    <!--<script src="../tooltip/tooltip.js"></script>-->
    <script src="../popup/popup.js"></script>
    <script src="datagrid.js"></script>

    <script src="../../misc/js/ng-stats.js"></script>
<style>
    #statsDiv{
        position: fixed;
        top:5px;
        right:120px;
        background-color: #121212;
        color: blue;
    }
    .watch-count{
        color: #ff0000;
    }
    .digest-length{
       color: #ff0000;
    }
</style>
</head>
<body ng-controller="datagridCtrl">
<button ng-click="dosearch()" >查询数据</button>&nbsp;
<button ng-click="cleardata()" >清空数据</button>&nbsp;
<button ng-click="getSelectedItems()" >取得选中数据</button>&nbsp;

<br><br>
<wi-datagrid  wid="dg" dataprovider="pagedata" headerheight="40" width="95%" height="335" hscrollpolicy="auto" multiselect="true" showno='true'
              rowheight="35" pagemode="client"  borderdirection="horizontal" wordwrap="true"
              showexcel="true" rowcolorfunction="myRowColorFunction" treefield="username" collapse="true"
              columns="columnDefs"
              pagemode="client" pageselect="[20,30,40,50,60,100,200]" >

    <wi-datagrid-column-group text="标题组1">
        <wi-datagrid-column headtext="标题8" datafield="username1" align="center"></wi-datagrid-column>
        <wi-datagrid-column headtext="标题9" datafield="sex" sortable="true" align="center" labfunction="setSexLabelFun"></wi-datagrid-column>
        <wi-datagrid-column headtext="标题10" datafield="address"></wi-datagrid-column>
    </wi-datagrid-column-group>

    <!--<wi-datagrid-column headtext="标题1" datafield="username" align="center" sortable="true" ></wi-datagrid-column>-->

    <wi-datagrid-column headtext="标题2" datafield="sex"  width="50" itemrenderer="sexItemRender" >
        <script type="text/ng-template"  id="sexItemRender">
            <div>
                <span ng-if="pdata.sex===1">
                    <a style="color: red"  ng-click="wid.test($event,pdata)">男</a>
                </span>
                <span ng-if="pdata.sex===0" >
                    <select>
                        <option selected="selected">女</option>
                        <option>男</option>
                    </select>
                </span>
            </div>
        </script>
    </wi-datagrid-column>
    <!--<wi-datagrid-column headtext="标题3" datafield="sex" align="center" headrenderer="myHeadRender"  labfunction="setSexLabelFun">
        <script type="text/ng-template" id="myHeadRender">
            <div ng-init="sexType=['男','女']">
                性别：<select>
                    <option ng-repeat="s in sexType">{{s}}</option>
                </select>
            </div>
        </script>
    </wi-datagrid-column>
    <wi-datagrid-column headtext="标题4" datafield="username1" width="200" headrenderer="dateHeadRender" >
        <script type="text/ng-template"  id="dateHeadRender">
            <span class="wi-popup">
                <input type="button" value="左上角"/>
                <ul class="wi-popup-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </span>
        </script>
    </wi-datagrid-column>
    <wi-datagrid-column headtext="标题5" datafield="username1" ></wi-datagrid-column>
    <wi-datagrid-column headtext="标题6" datafield="username1"  ></wi-datagrid-column>
    <wi-datagrid-column headtext="标题7" datafield="username1"  ></wi-datagrid-column>

    <wi-datagrid-column headtext="标题11" datafield="sex"  width="100"></wi-datagrid-column>
    <wi-datagrid-column headtext="标题12" datafield="sex"  width="300"></wi-datagrid-column>
    <wi-datagrid-column headtext="标题13" datafield="sex"></wi-datagrid-column>

    <wi-datagrid-column-group text="标题组2">
        <wi-datagrid-column headtext="标题14" datafield="username1"></wi-datagrid-column>
        <wi-datagrid-column headtext="标题15" datafield="sex"></wi-datagrid-column>
        <wi-datagrid-column-group text="个人信息#111A">
            <wi-datagrid-column  headtext="标题16" datafield="username1"></wi-datagrid-column>
            <wi-datagrid-column headtext="标题17" datafield="username1"></wi-datagrid-column>
        </wi-datagrid-column-group>
        <wi-datagrid-column-group text="个人信息#111B">
            <wi-datagrid-column headtext="标题18" datafield="sex"></wi-datagrid-column>
            <wi-datagrid-column headtext="标题19" datafield="sex"></wi-datagrid-column>
        </wi-datagrid-column-group>
    </wi-datagrid-column-group>

    <wi-datagrid-column headtext="标题20" datafield="address"></wi-datagrid-column>-->

</wi-datagrid><br><br>
<script>
    angular.module('myApp',['ui.wisoft.datagrid','ui.wisoft.bindHtml','angularStats','ui.wisoft.popup']).controller('datagridCtrl',datagridCtrl)
    function datagridCtrl($scope,$timeout){
        //dg作为外部和内部组件通信的一种渠道，
        // 通过这种双向绑定的方式，外部可以调用到组件的方法，组件也可以调用到外部的方法
        var dg =$scope.dg={};
        $scope.pagedata=[];

        var searchtimes=0;

        var initgrid = function(rowcount){
           var initData=[];
           for(var i=0;i<rowcount;i++) {
                var obj = {};
                obj.username = '朱云山' + i;
                obj.sex = i % 2;
                obj.age = 32;
                obj.address = '瑞城国际' + i;
                initData.push(obj);
            }
            return initData;
        }

        var initTreeGrid = function(rowcount){
            var initData=[];
            for(var i=0;i<rowcount;i++) {
                var obj = {};
                obj.username = '朱云山' + i;
                obj.sex = i % 2;
                obj.age = 32;
                obj.address = '瑞城国际' + i;
                obj.username1='username1瑞城国际瑞城国际瑞城国际瑞城国际瑞城国际'+i;
                obj.children=[];
                obj.dy1= 'dy1';
                obj.dy2= 'dy2';
                obj.dy3= 'dy3';
                for(var j=0;j<3;j++){
                    var child={
                        username:obj.username+'-'+j,
                        sex:j%2,
                        age:5,
                        address:'瑞诚'+j,
                        username1:'username1'+j
                    }
                    obj.children.push(child);
                }
                initData.push(obj);
            }
            return initData;
        }

        $timeout(function(){
                //实际使用是initgrid是调用后台后才能获得数据，使用$timeout可以使表格先显示处来
            $scope.pagedata=initTreeGrid(200);
//            $scope.pagedata=initgrid(21);
//            $scope.$digest();//$timeout会自动调用$digest()
        },150)


        //查询
        $scope.dosearch = function(){
            if(searchtimes==0){
                $scope.pagedata=$scope.pagedata=initTreeGrid(400);;
            }else{
                $scope.pagedata=$scope.pagedata=initTreeGrid(500);;
            }
            searchtimes++;
        }

        //置空数据，赋值为null或[]
        $scope.cleardata = function(){
//            $scope.pagedata=null;
//            setTimeout(function(){
                $scope.pagedata=[];
//                $scope.$digest();
//            })

        }

        //取得选中数据
        $scope.getSelectedItems = function(){
            var selected = dg.getSelectedItems();
            console.log('取得选中数据：');
            console.log(selected);
        }

//        $scope.columnDefs=[{'headtext':'动态1','datafield':'dy1'},
//            {'headtext':'动态2','datafield':'dy2'},
//            {'headtext':'动态3','datafield':'dy3'}];

//        $scope.columnDefs=[
//            {'headtext':'动态1','datafield':'dy1'},
//            {'headtext':'动态2','datafield':'dy2'},
//            {'headtext':'动态标题3','datafield':'dy3',children:[
//                {'headtext': '动态4','datafield': 'dy2'},
//                {'headtext': '动态5','datafield': 'dy2'},
//                {'headtext': '动态标题','datafield': 'dy2',children:[
//                    {'headtext': '动态7','datafield': 'dy2'}
//                ]}
//            ]}];


        $scope.columnDefs=[
            {'headtext':'动态标题1',children:[
                {'headtext': '动态标题2','datafield': 'dy2',children:[
                    {'headtext': '动态1','datafield': 'dy2'},
                    {'headtext': '动态2','datafield': 'dy2'}
                ]},
                {'headtext': '动态标题3','datafield': 'dy2',children:[
                    {'headtext': '动态4','datafield': 'dy2'},
                    {'headtext': '动态标题4','datafield': 'dy2',children:[
                        {'headtext': '动态7','datafield': 'dy2'},
                        {'headtext': '动态7','datafield': 'dy2'}
                    ]}
                ]}
            ]}];

        //可以返回一段html
        $scope.setSexLabelFun=function(data){
            if(data){
                if(data.sex==1){
                    if(data.address==='瑞城国际1'){
                        return '<span style="color: red">'+data.username+'男瑞城国际1瑞城国际1瑞城国1</span>';
                    }
                    return '男';
                }else if(data.sex==0){
                    return '女';
                }
            }
            else{
                //清空数据（必须要写为空的判断处理，否则不能清空数据）
                return " ";//空字符串
            }
        }

        //返回颜色值
        $scope.myRowColorFunction=function(data){
            if(data.sex==0&&data.address=='瑞城国际2'){
                return "#6BA95B";
            }
        };

        /**
         * 因为itemrender是直接include进组件的，而组件的scope不是原型继承的,所以itemrender中调用的方法是没有办法直接调用到外面scope中的方法，
         * 通过pdata可以获得行绑定的数据
         * 组件scope的wid和外面scope的dg是双向绑定的，所以itemrenderer中可以通过wid.xxx的方式来访问dg.xxx的方法
         *
         * @param event
         */
        dg.test=function(event,itemData){
            console.log(event);
            console.log(itemData);
            console.log('........')
            itemData.username1='zzzzzz';
            event.stopPropagation();
        }
    }
</script>
<!--<div id="statsDiv" angular-stats watch-count=".watch-count" digest-length=".digest-length"-->
     <!--on-watch-count-update="onWatchCountUpdate(watchCount)"-->
     <!--on-digest-length-update="onDigestLengthUpdate(digestLength)">-->
    <!--Watch Count: <span class="watch-count"></span><br />-->
    <!--Digest Cycle Length: <span class="digest-length"></span>-->
<!--</div>-->
</body>
</html>